<template>
  <div
    class="data-report-container animate__faster animate__animated animate__fadeIn"
    v-loading="loading"
  >
    <div class="data-report-body">
      <TableView>
        <template slot-scope="{ width, height }">
          <a-table
            :data-source="tableData"
            :columns="columns"
            :scroll="{ x: width, y: height }"
            :pagination="false"
          >
          </a-table>
        </template>
      </TableView>
    </div>
  </div>
</template>

<script>
import TableView from "@/components/tableView";
import { capacityStatisticsStrengthGradeChart } from "@/api/wisdom-beam/productionManage-app";
export default {
  components: {
    TableView,
  },
  data() {
    return {
      //表格列配置
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          align: "center",
          width: 60,
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: "强度等级",
          dataIndex: "strengthGrade",
          key: "strengthGrade",
          width: "200px",
        },
        {
          title: "生产方量（m³）",
          dataIndex: "production",
          key: "production",
          width: "200px",
        },
        {
          title: "生产车次（辆）",
          dataIndex: "total",
          key: "total",
          width: "200px",
        },
      ],
      tableData: [],
      loading: true,
    };
  },
  mounted() {},
  methods: {
    getTableData() {
      this.loading = true;
      let {
        conditionsData: { block, engineerName, mixin, placePart, strength },
        defaultTime,
      } = this.$parent.$data;
      capacityStatisticsStrengthGradeChart({
        secCode: block,
        equCode: mixin,
        startTime: defaultTime[0],
        endTime: defaultTime[1],
        projectName: engineerName,
        placePart,
        strengthGrade: strength,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.tableData = result.data;
          this.loading = false;
        })
        .catch((_) => {
          this.tableData = [];
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.data-report-container {
  width: 100%;
  height: 100%;
  padding-right: 10px;
  .custom-scrollbar();
  .data-report-body {
    height: 100%;
    background: #fff;
  }
}
</style>
